import React from 'react'
import {withRouter} from 'react-router-dom'
import {Button, Card, Form, Input} from 'antd'
import {connect} from 'react-redux'
import ContentWrap from "../../../../components/Base/ContentWrap";
import Screen from "../../../../components/Base/Screen";

import Immutable from 'immutable';
import Api from "../../../../configs/Api";
import CommonUtil from "../../../../utils/CommonUtil";

const FormItem = Form.Item;

class PasswordSet extends Screen {
    constructor(props) {
        super(props);
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll(async (err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);

                let req = await this.request(Api.USER_RESET_PASSWORD, values);
                if (req.status !== Api.SUCCESS_CODE) return CommonUtil.toast(req.msg);

                // 登录成功
                this.onSetValueToStore(['root', 'user'], Immutable.fromJS({}));
                CommonUtil.toast('修改成功,请重新登录');
                this.onPushScreen('/login')
            }
        });
    };


    compareToFirstPassword = (rule, value, callback) => {
        const form = this.props.form;
        if (value && value !== form.getFieldValue('new_pwd')) {
            callback('两次输入的密码不一致!');
        } else {
            callback();
        }
    };

    render() {
        const {getFieldDecorator} = this.props.form;

        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 4},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 10},
            },
        };

        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 16,
                    offset: 8,
                },
            },
        };

        return (
            <ContentWrap>
                <Card bordered={false}>
                    <Form
                        onSubmit={this.handleSubmit}
                    >
                        <FormItem
                            {...formItemLayout}
                            label="旧密码"
                        >
                            {getFieldDecorator('old_pwd', {
                                rules: [{required: true, message: '旧密码不能为空!'}],
                            })(
                                <Input type="password"/>
                            )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="新密码"
                        >
                            {getFieldDecorator('new_pwd', {
                                rules: [{required: true, message: '新密码不能为空!'}],
                            })(
                                <Input type="password"/>
                            )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="确认密码"
                        >
                            {getFieldDecorator('new_pwd_confirm', {
                                rules: [{required: true, message: '确认密码不能为空!'}, {
                                    validator: this.compareToFirstPassword,
                                }],
                            })(
                                <Input type="password"/>
                            )}
                        </FormItem>

                        <FormItem {...tailFormItemLayout}>
                            <Button type="primary" htmlType="submit">提交</Button>
                        </FormItem>
                    </Form>
                </Card>
            </ContentWrap>
        )
    }
}

export default withRouter(connect()(Form.create()(PasswordSet)))

